/** @jsxImportSource @emotion/react */
import {  css } from "@emotion/react";
import * as React from "react";
import {
    useTheme,
    Tabs,Tab, TwoHalfFrame, Pager,
    TabPanel,
    DarkMode,
    PanelEnlargeCtx,
} from "customize-easy-ui-component";

import { useMedia } from "use-media";
import {useContext} from "react";
import {UserContext} from "../routing/UserContext";
import useLogoutMutation from "../common/useLogoutMutation";
import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
import {InspectMainQuery} from "./__generated__/InspectMainQuery.graphql";
import {MeIspList} from "./MeIspList";
import {MySubReport} from "./MySubReport";
import {Vector2} from "@use-gesture/core/dist/declarations/src/types/utils";
// import {TwoHalfFrame} from "../../UiDebugSave/sample/TwoHalfFrame";
// import {Pager} from "../../UiDebugSave/sample/Pager";


const graphql = require("babel-plugin-relay/macro");

interface InspectMainProps {
    prepared: {
        myQuery: PreloadedQuery<InspectMainQuery>;
    }
    children: React.ReactNode;      //自己是路由Main主页面，所以这个children表示有没有嵌套的子路由Main入口页面
    id?: string;
    routeData: any;
}

export default function InspectMain(props: InspectMainProps) {
    //把该页面{当前mount的组件}所需要的预制数据preLoad()，数据需求需要在这里预先定义好了，才能够在切换路由点击连接时提前准备完数据的获取，避免render多来一回。
    //报错：...MySubReport因为...MeIspList都用了$orderBy，字段名字用了同一份，findAll查询的模型不是同一个实体，导致无效关联字段，No property 'task' found for type 'Report'异常
    const data = usePreloadedQuery<InspectMainQuery>(
        graphql`
            query InspectMainQuery( $after:String,$first:Int=10,$orderBy:String,$asc:Boolean=true,
                $iwhere:IspCommonInput,$orderByS:String,$swhere:IspCommonInput
            ) {
                ...MeIspList
                ...MySubReport
            }
        `,
        props.prepared.myQuery,
    );
    //const { countTask:sumofTask,  }=data;
    const theme = useTheme();
    const {user, setUser} =useContext(UserContext);
    const isLarge = useMedia({ minWidth: "768px" });
    const [activeTab, setActiveTab] = React.useState(0);      //Pager两个Tab页面[0,1]
    const renderList = isLarge || !props.children;  　//大屏或者小屏但没有显示子路由页面。
    console.log("来InspectMain看当前的params props=",props);
    const { call:signOut } = useLogoutMutation();

    //Pager层次和index布局关系[0 [0, 1] , 1 ]关系到了逻辑;
    //返回true=脱离控制，交给下一层次的的Pager控制
    const { setActivecas, getActivecas } =useContext(PanelEnlargeCtx);
    const onChildCannotDrag = React.useCallback(([x, y]:Vector2) => {
        if (x < 0 || x > 0) {
            setActivecas(getActivecas!()===1? 0 : 1);
            return true;
        }
        return false;
    }, [setActivecas, getActivecas]);
    //碰巧没有用到props.children，路由单独的没有第二层子路由的。
    return (
        <TwoHalfFrame  rightPanel={props.children}
                leftStyle={{
                           overflowY: 'hidden',
                           marginBottom: 'unset',
                       }}
        >
            <div  css={[
                {
                    width: "100%",
                    top: 0,
                    background: theme.colors.palette.gray.base,
                    zIndex: theme.zIndices.sticky,
                    position: "sticky",
                }
            ]}
            >
                <div css={{ flex: "0 0 auto", zIndex: 2 }}>
                    <DarkMode>
                        <Tabs
                            css={{
                                position: "sticky",
                                top: 0,
                                background: theme.colors.palette.gray.base
                            }}
                            onChange={i => setActiveTab(i)}
                            value={activeTab}
                            variant="evenly-spaced"
                        >
                            <Tab id="meisp">我的检验</Tab>
                            <Tab id="subreport">我的分项</Tab>
                        </Tabs>
                    </DarkMode>
                </div>
            </div>
            <Pager    lazyLoad={false}
                      value={activeTab}   onRequestChange={i => setActiveTab(i)}
                      onNestDragEnd={onChildCannotDrag}
                      css={{
                          height: '100%',
                      }}
            >
                <TabPanel id="meisp"
                          css={{
                              height: '100%',
                          }}
                >
                    <React.Suspense fallback={'请稍等'}>
                        <MeIspList isps={data}/>
                    </React.Suspense>
                </TabPanel>
                <TabPanel id="subreport"
                          css={{
                              height: '100%',
                          }}
                >
                    <React.Suspense fallback={'请稍等'}>
                        <MySubReport isps={data}/>
                    </React.Suspense>
                </TabPanel>
            </Pager>
        </TwoHalfFrame>
    );
};

